<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作 
		    addClass()         有参：1个参和多个参
			                   语法：addClass("类名")
			                   <p class="类名">
							   语法:addClass("类名1");
							   <p class="类名1 类名2">
							   功能：匹配元素集合中的所有元素
							        添加一个或者多个类名操作
							   理解：元素添加存在的样式   
		    removeClass()    功能：匹配元素集合中的所有元素
			                      移除一个或者多个类名操作
			toggleClass()   功能：如果元素有类名移除 没有则添加
			hasClass()      功能：检查匹配元素集合中是否包含指定类名
			                       返回值bool
		-->
	<script src="../js/jquery-1.11.1.js"></script>
	        <style>
	            .bgColor{
	                width: 300px;
	                height: 300px;
	                background: red;
	            }
	            .broders{
	                border: 10px solid yellow;
	                border-radius: 50%;
	            }
	            
	        </style>
	    </head>
	    <body>
	        <div id="targetElement"></div>
	            
	            <button id="addClassBtn">添加类名</button>
	            <button id="removeClassBtn">移除类名</button>
	            <button id="toggleClassBtn">切换类名</button>
	            <button id="hasClassBtn">检查类名是否存在</button>
	            
	            <div id="resultArea"></div>
	        
	        <script>
	            //1.点击  添加类名 按钮 添加效果【样式】300*300 背景色红色
	                $("#addClassBtn").click(function() {
	                    //div添加样式---存在样式：类名
	                    $("#targetElement").addClass("bgColor broders");
	                    $("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
	                });
	            
	                // 移除类
	                $("#removeClassBtn").click(function() {
	                    $("#targetElement").removeClass("broders");
	                    $("#resultArea").html("<h4>移除样式类名：broders</h4>");
	                });
	               //切换  切换类名 按钮 添加样式效果【样式】
				   //300*300 背景色红色 圆 外....
				   $("#toggleClassBtn").click(function() {
				       $("#targetElement").toggleClass("broders");
				       $("#resultArea").text("<h4>切换样式类名：broders</h4>");
				   });
	               //切换 切换类名 按钮 添加效果【样式】
				   //去掉 300*300 背景色红色 
				   $("#toggleClassBtn").click(function() {
				       $("#targetElement").toggleClass("bgColor");
				       $("#resultArea").html("<h4>切换样式类名：broders</h4>");
				   });
				   //检查类名是否存在：true存在    false不存在
				   $("#hasClassBtn").click(function() {
				      var hc=$("#targetElement").hasClass("bgColor");
				       $("#resultArea").text("检查当前样式是否存在:"+hc);
				   });
	        </script>
	        
	    </body>
	</html>